.user-details {
    .user-header {
        // height: 94px;
        // border: 1px solid rgba(0, 0, 0, 0.1);
        // padding: 0px 0 0px 36px;

        .user-header-title {
            font-family: PingFang SC-Semibold;
            font-weight: 600;
            font-size: 22px;
            color: #161413;
            margin-left: 0.5vw;
        }
        
        .backIconBox {
            width: 20px;
            height: 20px;
        }
    }
    .middleBox {
        width: 100%;
        height: auto;
        background: #f6f6f6;
        border-radius: 15px;
        padding: 2vw;
        box-sizing: border-box;
        margin-top: 2vw;
        .userDetailBox {

            .userPic {
                // width: 5.8vw;
                // height: 5.8vw;
                img {
                    width: 5.8vw;
                    height: 5.8vw;
                    border-radius: 50%;
                }
            }
            .userInfo{
                margin-left: 1vw;
                .userRightTop {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 24px;
                    color: #313131;
                }
                .userMiddle {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 14px;
                    color: #adadad;
                    margin: 0.6vw 0;
                }
                .userBottom {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #313131;
                    background: #fff;
                    padding: 10px;
                    box-sizing: border-box;
                    border-radius: 10px;
                    .userBottomItem {
                        margin: 0 20px 0 0;
                        img {
                            width: 20px;
                            height: 20px;
                            margin: 0 5px 0 0;
                        }

                    }
                }
            }
        }
        .aboutBox {
            width: 100%;
            height: auto;
            margin-top: 1vw;
            .aboutContent {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #adadad;
                margin-top: 1vw;
                line-height: 22px;
            }

        }
        .picturesBox {
            width: 100%;
            height: auto;
            margin-top: 1vw;
            .picturesContent {
                margin-top: 1vw;
                .picturesItem{
                    width: 5vw;
                    height: 7vw;
                    border-radius: 6px;
                    border: 1px solid rgb(234, 233, 233);
                    margin: 0 10px 0 0;
                }
                
            }
        }
        .basicBox {
            width: 100%;
            height: auto;
            margin-top: 1vw;
            .baseContent {
                width: 100%;
                flex-wrap: wrap;
                .basicItem {
                    width: 49%;
                    margin: 1vw 0;
                    .baseItemTopTitle {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FF7828;
                        line-height: 22px;
                    }
                    .baseitemContent {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #737373;
                        line-height: 22px;
                        text-align: left;
                        margin-top: 8px;
                    }
                }
                
            }
        }
        .advancedBox {
            width: 100%;
            height: auto;
            margin-top: 1vw;
            .advancedContent {
                width: 100%;
                flex-wrap: wrap;
                .advancedItem {
                    width: 49%;
                    margin: 1vw 0;
                    .advancedItemTopTitle {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FF7828;
                        line-height: 22px;
                    }
                    .advanceditemContent {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #737373;
                        line-height: 22px;
                        text-align: left;
                        margin-top: 8px;
                    }
                }
                
            }
        }
        .socialBox {
            width: 100%;
            height: auto;
            margin-top: 1vw;
            .socialContent {
                width: 100%;
                .socialItem {
                    width: 20%;
                    margin: 1vw 0;
                    background: #f6f6f6;
                    text-align: left;
                    padding: 1vw;
                    box-sizing: border-box;
                    border-radius: 10px;
                    margin: 1vw 1vw 1vw 0;
                    .socialItemTopTitle {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FF7828;
                        line-height: 22px;
                    }
                    .socialItemContent {
                        margin-top: 8px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        font-size: 38px;
                        color: #313131;
                        line-height: 48px;
                    }
                }
                
            }
        }
        .interestBox {
            width: 100%;
            height: auto;
            margin-top: 1vw;
            .interestTip {
                margin: 1.2vw 0 0.8vw 0;
            }
            .interestContent {
                width: 100%;
                .interestItem {
                    width: 20%;
                    margin: 1vw 0;
                    background: #f6f6f6;
                    text-align: left;
                    padding: 1vw;
                    box-sizing: border-box;
                    border-radius: 10px;
                    margin: 1vw 1vw 1vw 0;
                    .interestItemTopTitle {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FF7828;
                        line-height: 22px;
                    }
                    .interestItemContent {
                        margin-top: 8px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        font-size: 38px;
                        color: #313131;
                        line-height: 48px;
                    }
                }
                
            }
                
            .select-bar {
                width: 100%;
                margin: 10px 0;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                justify-content: flex-start;

                .select-i {
                    width: auto;
                    background: #f6f6f6;
                    border-radius: 5px;
                    font-family: PingFang SC-Regular;
                    font-weight: 400;
                    font-size: 12px;
                    color: #313131;
                    text-align: center;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    margin: 0 10px 0 0;
                }
                .selected {
                    background: #FFF0E6;
                    color: #FF7828;
                    border: none;
                }
            }
            
            .selectBarSkill {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                justify-content: flex-start;

                .select-i {
                    width: auto;
                    background: #f6f6f6;
                    border-radius: 10px 10px 10px 10px;
                    font-family: PingFang SC-Regular;
                    font-weight: 400;
                    font-size: 12px;
                    color: #313131;
                    // line-height: 64px;
                    text-align: center;
                    margin: 0 10px 0 0;
                    padding: 6px;
                    box-sizing: border-box;
                }
                .selected {
                    background: #FFF0E6;
                    color: #FF7828;
                    border: none;
                }
            }
            .skillImgBox {
                display: flex;
                align-items: center;
                img {
                    width: 16px;
                    height: 16px;
                    margin: 0 5px 0 0;
                }
            }
        }
    }

    .whiteBox {
        background-color: #fff;
        border-radius: 15px;
        padding: 1vw;
        box-sizing: border-box;
    }

    .minTitleBox {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #313131;
    }

    .user-events {
        padding: 32px 0;
        display: flex;
        justify-content: end;
        column-gap: 24px;

        .ant-btn {
            min-width: 120px;
            height: 45px;
        }

        .save-btn {
            width: 90px;
            background: #161413;
            box-shadow: 0px 0px 11px 0px rgba(109, 100, 100, 0.06);
            border: unset;
            color: #fff;
        }
    }
    // .previewBox {
    //     width: 50vw;
    //     height: 50vh;
    // }
    // .ant-image-preview-body {

    // }
    // .user-card {
    //     display: flex;
    //     padding: 32px;
    //     column-gap: 24px;
    //     height: 290px;
    //     background: #fff;
    //     border-radius: 20px;
    //     position: relative;

    //     .user-pic {
    //         width: 160px;
    //         height: 160px;
    //         border-radius: 50%;
    //         background: pink;
    //     }

    //     .user-base-info {
    //         .user-name {
    //             font-family: PingFang SC-Bold;
    //             font-weight: bold;
    //             font-size: 32px;
    //             color: #161413;
    //             line-height: 48px;
    //         }

    //         .user-info {
    //             margin-top: 22px;
    //             display: flex;
    //             flex-direction: column;
    //             row-gap: 16px;

    //             >div {
    //                 width: 550px;
    //                 display: flex;
    //                 justify-content: space-between;

    //                 >div {
    //                     font-size: 18px;
    //                     line-height: 24px;
    //                 }

    //                 .info-key {
    //                     font-family: PingFang SC-Regular;
    //                     font-weight: 400;
    //                     color: rgba(22, 20, 19, 0.7);
    //                 }

    //                 .info-value {
    //                     width: 200px;
    //                     font-family: PingFang SC-Semibold;
    //                     font-weight: 600;
    //                     color: #161413;
    //                 }
    //             }
    //         }
    //     }

    //     .user-status {
    //         position: absolute;
    //         padding: 8px 10px;
    //         right: 32px;
    //         top: 32px;
    //         height: 34px;
    //         border-radius: 100px;
    //         border: 1px solid #e8eef4;
    //         font-family: PingFang SC-Semibold;
    //         font-weight: 600;
    //         font-size: 14px;
    //         color: #161413;
    //         line-height: 16px;
    //         display: flex;
    //         align-items: center;
    //         column-gap: 8px;

    //         div {
    //             width: 8px;
    //             height: 8px;
    //             border-radius: 50%;
    //         }

    //         .user-active {
    //             background: #0ea730;
    //         }
    //     }
    // }

    // .select-date {
    //     margin: 64px 0 32px;
    //     display: flex;
    //     justify-content: end;
    //     column-gap: 24px;

    //     .ant-picker {
    //         .ant-picker-input {
    //             width: 160px;
    //         }
    //     }

    //     .ant-picker-range {
    //         width: 250px;
    //         height: 50px;
    //         background: #fff;
    //         border-radius: 8px;
    //         border: 1px solid #e8eef4;

    //         // 
    //         .ant-picker-input input {
    //             font-family: PingFang SC-Regular;
    //             font-weight: 400;
    //             font-size: 13px;
    //             color: #161413;
    //             line-height: 21px;
    //             text-align: center;
    //             width: 81px !important;
    //         }

    //         .ant-picker-range-separator {
    //             padding: 0;
    //         }

    //         .ant-picker-suffix img {
    //             width: 20px;
    //             height: 20px;
    //         }

    //         .ant-picker-clear {
    //             font-size: 20px;
    //         }
    //     }

    //     .ant-btn {
    //         width: 222px;
    //         background: #161413;
    //         box-shadow: 0px 0px 11px 0px rgba(109, 100, 100, 0.06);
    //         color: #fff;
    //         border: unset;
    //     }
    // }

    // .transaction-history {
    //     padding: 24px;
    //     background: #fff;
    //     border-radius: 20px;

    //     .table-title {
    //         font-family: PingFang SC-Bold;
    //         font-weight: bold;
    //         font-size: 20px;
    //         color: #161413;
    //         line-height: 30px;
    //         margin-bottom: 24px;
    //     }
    // }

    // .edit-user-form {
    //     .ant-input {
    //         width: 420px;
    //     }
    // }

}